<script setup>
  import { ref,watch } from 'vue'

  import TodoFooter from './components/TodoFooter.vue';
  import TodoHeader from './components/TodoHeader.vue';
  import TodoMain from './components/TodoMain.vue';

  import './assets/style.css'

   const todoList = ref([
    JSON.parse(localStorage.getItem("11111")) ||
    { id: 321, name: '学Vue组件通信', finished: false }, 
    { id: 127, name: '打王者', finished: true }, 
    { id: 666, name: '跑步1⼩时', finished: false }
   ])

  const AddTodo = (name) => {
    // console.log(222)
    todoList.value.push({
      id: Date.now(),
      name,
      finished: false
    })
  }
  const ChooseTodo = (i) => {
      todoList.value[i].finished = !todoList.value[i].finished
    }
  const DelTodo = (index) => {
    if(window.confirm('确认删除吗？')) todoList.value.splice(index, 1)
  }

  const DelCompleted = () => {
    todoList.value = todoList.value.filter((item) => !item.finished)
  }

  watch(todoList.value, () => {
    localStorage.setItem("11111", JSON.stringify(todoList.value))
  }, {
    deep: true
  })

</script>

<template>
  <TodoHeader @add-todo="AddTodo"></TodoHeader>
  <TodoMain :list="todoList" @del-todo="DelTodo" @choose-tod="ChooseTodo"></TodoMain>
  <TodoFooter :list="todoList" @del-completed="DelCompleted"></TodoFooter>
</template>

<style scoped>

</style>
